﻿@model OnlineViewModel

<script type="text/javascript">
    function saveStepData() {
        window.OnlineContent.Name = $("#Name").val();
        window.OnlineContent.Description = $("#Description").val();
        window.OnlineContent.SelectedCulture = $("#SelectedCultureName").val();
        window.OnlineContent.SelectedCountry = $("#SelectedCountry").val();
    }

    function loadStepData() {
        if (window.OnlineContent.Name) {
            $("#Name").val(window.OnlineContent.Name);
        }
        if (window.OnlineContent.Description) {
            $("#Description").val(window.OnlineContent.Description);
        }

        $("#wizard form").validate({
            rules: {
                Name: { required: true },
                Description: { required: false }/*HPN change at 14.09.13*/
            },
            messages: {
                Name: { required: "@Html.GetGlobalResource("OnlineWizard", "NameRequired")" },
			    Description: { required: "@Html.GetGlobalResource("OnlineWizard", "DescriptionRequired")" }
			}
		});
        $("#SelectedCountry").chosen();
        $('#SelectedCultureName').ddslick({
            defaultSelectedIndex: 2,
            onSelected: function (selectedData) {
                $("#SelectedCultureName").val(selectedData.selectedData.value);
            }
        });

        if (window.OnlineContent.SelectedCulture) {
            var selIndex = 0;
            $("#SelectedCultureName ul li").each(function (index) {
                if ($(this).find("input").val() == window.OnlineContent.SelectedCulture) {
                    selIndex = index;
                }
            });
            $('#SelectedCultureName').ddslick('select', { index: selIndex });
        }

        if (window.OnlineContent.SelectedCountry) {
            $("#SelectedCountry").val(window.OnlineContent.SelectedCountry);
            $('#SelectedCountry').trigger('liszt:updated');
        }
    }
</script>

<form>
	<div class="steps"><h4>Step 2 of 5</h4></div>
    <h3>@Html.GetGlobalResource("OnlineWizard", "Name")</h3>
	<input id="Name" name="Name" type="text" class="wz_s1_inp_name" maxlength="36"/>
	<div class="wizard-description-text">
		@Html.GetGlobalResource("OnlineWizard", "NameDescription")
	</div>
	<h3>@Html.GetGlobalResource("OnlineWizard", "Description")</h3>
	<textarea id="Description" name="Description" rows="3" class="wz_s1_tb_dsc" maxlength="2000"/>
	<div class="wizard-description-text">
		@Html.GetGlobalResource("OnlineWizard", "DescriptionDescription")
	</div>
	<table class="wz_s1_cc_table">
	<tr><td>
	<div class ="wz_s1_country_block">
		<h3>@Html.GetGlobalResource("OnlineWizard", "Country")</h3>
		<select id="SelectedCountry" style="width:250px;" class="wz_s1_sl_country">
			@foreach (var item in Model.Countries) {
				<option value="@item.Id">@item.Name</option>
			}
		</select>
		<div class="wizard-description-text">
			@Html.GetGlobalResource("OnlineWizard", "CountryDescription")
		</div>
	</div>
	</td>
	<td>
	<div class ="wz_s1_culture_block">
	<h3>@Html.GetGlobalResource("OnlineWizard", "Culture")</h3>
	<select id="SelectedCultureName"  class="wz_s1_sl_culture">
		@foreach (var item in Model.Cultures) {
			<option value="@item.Value" data-imagesrc="@item.Image">@item.Text</option>
		}
	</select>
	<div class="wizard-description-text">
		@Html.GetGlobalResource("OnlineWizard", "CultureDescription")
	</div>
	</div>
	</td>
	</tr>
	</table>
	
</form>